<%@ page language="java" contentType="text/html; charset=UTF-8"	 pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <title>费用统计</title>
  <style type="text/css">
  </style>
</head>
<body>
  <div class="layui-fluid">   
    <div class="layui-card">
      <!-- 查询区域  -->
      <div id="query-form" class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item"> 
        	<div class="layui-inline">
            	<label class="layui-form-label">统计期间</label>
            	<div class="layui-input-inline">
              		<input type="text" class="layui-input" id="sts_month_start"  name="stsMonthStart" readonly placeholder="开始月份">
            	</div>
            	<div class="layui-form-mid">
               	-
            	</div>
            	<div class="layui-input-inline">
              		<input type="text" class="layui-input" id="sts_month_end" name="stsMonthEnd" readonly placeholder="结束月份">
            	</div>
            </div>        
          	<div class="layui-inline">
            	<label class="layui-form-label" style="width:180px;">费用归属公司</label>
            	<div class="layui-input-inline" style="width:260px;">
              		<select name="orgTypeAndId" id="query_select_orgId" lay-filter="query_select_orgId" lay-search >
	              		<c:if test="${not empty orgInfos }">
	              			<c:forEach items="${orgInfos}" var="org">
	              				<option value="${org.id}-${org.types}" <c:if test="${org.id == bindOrgId }">selected</c:if>>${org.compName }</option>
		            		</c:forEach>
	              		</c:if>
	              	</select>
            	</div>
          	</div>
          	
          	<shiro:hasPermission name="LIST_FEE_COLLECT">
	          <div class="layui-inline">
	            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-feeCollect-search">
	              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
	            </button>
	          </div>
          	</shiro:hasPermission>
        </div>
      </div>
      <div class="layui-card-body">
      		<div style="text-align: center; margin-top:5px;  margin-bottom:18px;">
		          <div class="layui-inline" style="float:right;margin-bottom:2px;margin-right:0px;">
			         <label class="layui-form-label">单位：元</label> 
	          	  </div>
	        </div>
	        <hr/>
	      	<div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
	        	<ul class="layui-tab-title">
	            	<li class="layui-this" lay-id="manageFee"><B>管理费用</B></li>
	                <li lay-id="marketFee"><B>营销费用</B></li>
	            </ul>
	            <div class="layui-tab-content">
	            	<div class="layui-tab-item layui-show">
	        			<table id="LAY-manageFee-manage" lay-filter="LAY-manageFee-manage"></table>
	                </div>
	                <div class="layui-tab-item">
	                    <table id="LAY-marketFee-manage" lay-filter="LAY-marketFee-manage"></table>
	                </div>
	            </div>
	        </div>      
      </div>
    </div>
  </div>
  <script>
  var stageJSON = <infopub:dicJson groupNo="A00010077" />;
  	layui.config({
    	base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
  	}).extend({
    	index: 'lib/index' //主入口模块
  	}).use(['index', 'table', 'set', 'laydate', 'element'], function(){
    	var $ = layui.$
    	,form = layui.form
    	,table = layui.table
    	,laydate = layui.laydate
    	,element = layui.element;
    	
    	//tab重新渲染宽度
    	element.on('tab(component-tabs-brief)', function(obj){
    		$(window).resize();
    	});
    	
    	var insStart = laydate.render({
	      elem: '#sts_month_start'
	      ,type: 'month'
	      ,btns: ['now', 'confirm']
	      ,format:'yyyy年MM月'
	      ,value: layui.util.toDateString(new Date().getTime(), 'yyyy年MM月') //30天前
	      ,done:function(value, date){
	    	  //更新结束日期的最小日期
  	          insEnd.config.min = lay.extend({}, date, {
  	              month: date.month - 1
  	          });
	  	        
  	          //自动弹出结束日期的选择器
	  	      insEnd.config.elem[0].focus();
  	          
	      	  table.reload('LAY-manageFee-manage', {page: {curr: 1},
			 	 where: {'stsMonthStart':value,'stsMonthEnd':$("#sts_month_end").val(),'orgTypeAndId':$('#query_select_orgId').val()}
		      });
	      	  table.reload('LAY-marketFee-manage', {page: {curr: 1},
			 	 where: {'stsMonthStart':value,'stsMonthEnd':$("#sts_month_end").val(),'orgTypeAndId':$('#query_select_orgId').val()}
		      });
	      }
	    });
	    
    	var insEnd = laydate.render({
	      elem: '#sts_month_end'
	      ,type: 'month'
	      ,btns: ['now', 'confirm']
	      ,format:'yyyy年MM月'
	      ,value: layui.util.toDateString(new Date().getTime(), 'yyyy年MM月') //30天前
	      ,done:function(value, date){
	    	  //更新开始日期的最大日期
        	  insStart.config.max = lay.extend({}, date, {
	  	          month: date.month - 1
	  	      });
	    	  
	      	  table.reload('LAY-manageFee-manage', {page: {curr: 1},
			 	 where: {'stsMonthStart':$("#sts_month_start").val(),'stsMonthEnd':value,'orgTypeAndId':$('#query_select_orgId').val()}
		      });
	      	  table.reload('LAY-marketFee-manage', {page: {curr: 1},
			 	 where: {'stsMonthStart':$("#sts_month_start").val(),'stsMonthEnd':value,'orgTypeAndId':$('#query_select_orgId').val()}
		      });
	      }
	    });
	    
		form.on('select(query_select_orgId)', function(data){
   		 	table.reload('LAY-manageFee-manage', {page: {curr: 1},
		 		where: {'stsMonthStart':$('#sts_month_start').val(),'stsMonthEnd':$('#sts_month_end').val(),'orgTypeAndId':$('#query_select_orgId').val()}
	      	});
   		 	table.reload('LAY-marketFee-manage', {page: {curr: 1},
		 		where: {'stsMonthStart':$('#sts_month_start').val(),'stsMonthEnd':$('#sts_month_end').val(),'orgTypeAndId':$('#query_select_orgId').val()}
	      	});
    	});
		
		var stsMonthStart = $('#sts_month_start').val();
		var stsMonthEnd = $('#sts_month_end').val();
    	// 管理费用表单
    	table.render({
      		elem: '#LAY-manageFee-manage'
      		,url: basePath + '/feeCollect/queryData1' //请求数据接口
      		,where: {'stsMonthStart':stsMonthStart,'stsMonthEnd':stsMonthEnd,'orgTypeAndId':$('#query_select_orgId').val()}
      		,cols: [[
					{type:'numbers', title: '序号',fixed:'left', width: 120, align:'center'}
					,{field: 'orgType', title: '公司类型',fixed:'left',width: 220, align:'center', templet: function(d){
							if(d.types=='1'){
								return "总部公司";
							}else if(d.types=='2'){
								return "区域公司";
							}else if(d.types=='3'){
								return "项目公司";
							}
						}
					}
					,{field: 'orgBillName', title: '费用归属公司',fixed:'left',width: 220, align:'center'}
					,{field: 'beeAmount', title: '管理费用总额',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.beeAmount);	
						}
					}
					,{field: 'manFee', title: '人工费用',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.manFee);	
						}
					}
					,{field: 'travelFee', title: '差旅费用',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.travelFee);	
						}
					}
					,{field: 'bizServeFee', title: '业务招待费',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.bizServeFee);	
						}
					}
					,{field: 'officeFee', title: '办公费',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.officeFee);	
						}
					}
					,{field: 'otherFee', title: '其他费用',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.otherFee);	
						}
					}
				  ]]
      		,page: true
      		,limit: 10
    	});

    	// 营销费用表单
    	table.render({
      		elem: '#LAY-marketFee-manage'
      		,url: basePath + '/feeCollect/queryData2' //请求数据接口
      		,where: {'stsMonthStart':stsMonthStart,'stsMonthEnd':stsMonthEnd,'orgTypeAndId':$('#query_select_orgId').val()}
      		,cols: [[
					{type:'numbers', title: '序号',fixed:'left', width: 120, align:'center'}
					,{field: 'orgType', title: '公司类型',fixed:'left',width: 220, align:'center', templet: function(d){
							if(d.types=='1'){
								return "总部公司";
							}else if(d.types=='2'){
								return "区域公司";
							}else if(d.types=='3'){
								return "项目公司";
							}
						}
					}
					,{field: 'orgBillName', title: '费用归属公司',fixed:'left',width: 220, align:'center'}
					,{field: 'beeAmount', title: '营销费用总额',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.beeAmount);	
						}
					}
					,{field: 'manFee', title: '人工费用',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.manFee);	
						}
					}
					,{field: 'travelFee', title: '差旅费用',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.travelFee);	
						}
					}
					,{field: 'bizServeFee', title: '业务招待费',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.bizServeFee);	
						}
					}
					,{field: 'officeFee', title: '办公费',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.officeFee);	
						}
					}
					,{field: 'otherFee', title: '其他费用',width: 220, align:'center', templet: function(d){
							return formatCurrency(d.otherFee);	
						}
					}
					]]
      		,page: true
      		,limit: 10
    	});
    	
    	<shiro:hasPermission name="LIST_FEE_COLLECT">
	    	//监听搜索
	    	form.on('submit(LAY-feeCollect-search)', function(data){
	    		var tabId = $(".layui-tab-title .layui-this").attr("lay-id");
	    		if(tabId == 'manageFee'){
	    			//执行重载
			      	table.reload('LAY-manageFee-manage', {page: {curr: 1},
			        	where: trimData(data)
			      	});
	    		}else{
	    			//执行重载
			      	table.reload('LAY-marketFee-manage', {page: {curr: 1},
			        	where: trimData(data)
			      	});
	    		}
	    	});
    	</shiro:hasPermission>
  });
  	
  </script>
</body>
</html>

